<template>
  <h1>
    选座购票模块
  </h1>

  <ul>
    <li @click="gotoProduct(1, '《泰坦尼克号》')">4排8座</li>
    <li @click="gotoProduct(2, '《美国美人》')">3排7座</li>
    <li @click="gotoProduct(3, '《罗马假日》')">5排2座</li>
    <li @click="gotoProduct(4, '《肖申克的救赎》')">5排8座</li>
  </ul>

</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter()
const gotoProduct = (id, type) => {
  router.push({
    name: 'purchase',
    query: { id: id, type }
  })
}
</script>

<style scoped>
ul {
  list-style-type: none;
}
</style>